<template>
  <div style="font-size: 20px; font-weight: bold; color: red; text-decoration: underline; font-style: italic">
    欢迎你，提升自己吧
  </div>
  <div>
    {{a}}
    {{b}}
  </div>
  <div>
    {{data.d}}
    {{data.b}}
    {{data.a}}
  </div>
  <div>
    <input v-model="data.a" type="text" />
  </div>
  <div>
    <span style="font-size: 15px;color:blue" v-if="data.name === '佩奇'">佩奇</span>
    <span style="font-size: 15px;color:green" v-if="data.name === '乔治'">乔治</span>
    <span style="font-size: 15px;color:yellow" v-if="data.name === '维尼'">维尼</span>
    <span style="font-size: 15px;" v-else></span>
  </div>
  <div style="display: flex;">
    <div @click="show(item)" style="width:200px;height: 200px;background-color:lightskyblue;text-align: center;line-height: 200px;font-size: 30px;margin: 0 10px" v-for="item in data.num">{{item}}</div>
  </div>
  <div style="margin-bottom:20px">
    <select style="width: 50px">
      <option v-for="item in data.fruit">{{item}}</option>
    </select>
  </div>

  <div style="margin-bottom:20px">
    <button @click="click">点我加好运</button>
  </div>
  <div>
    <div :style="data.box"></div>
  </div>
  <div>
    <img style="width: 200px;height: 150px" :src="data.img" >
  </div>

  <div class="mb-4">
    <el-button>Default</el-button>
    <el-button @click="" type="primary">提交</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button type="success" loading="true" color="#626aef" style="color: yellowgreen">正在加载</el-button>
  </div>

  <div style="margin:30px">
    <el-icon :size=20>
      <Edit />
    </el-icon>
    <span style="margin-left: 30px;color:#2891ef">
      <el-icon :size=20 color="#57CDAEFF" style="top: 4px"><View/></el-icon>100
    </span>
  </div>

  <el-button type="danger" :icon="Delete">删除</el-button>
  <el-button size="large" type="success" :icon="Delete">删除</el-button>
  <el-button type="danger" :icon="Delete" size="large" circle/>
  <el-input
      v-model="input2"
      style="width: 240px; margin-left: 20px"
      placeholder="Type something"
      :prefix-icon="Search"
  />

</template>

<script setup>
import {reactive,ref,onMounted} from "vue";
import {Delete,Search} from '@element-plus/icons-vue'
import router from "@/router/index.js";
const a = ref(1)
const b = ref("青哥哥好帅")


const data = reactive({
  a:123,
  b:"青哥哥好看",
  c:"12323213",
  d:false,
  name:"",
  num:[1,2,3,4,5],
  fruit:["苹果","橘子","香蕉"],
  box:{
    width:'100px',
    height:'100px',
    backgroundColor:'red'
  },
  img:"https://www.runoob.com/wp-content/uploads/2024/12/declarative-rendering-1.png",
  id: router.currentRoute.value.query.id,
  userName:router.currentRoute.value.query?.userName ? router.currentRoute.value.query.userName : '无'
})
const click =() =>{
  alert("好运+1")
}
const show =(value) =>{
  alert(value)
}
// onMounted(()=>{
//   alert("页面加载完成")
// })
console.log("传过来的id=" + data.id + "传过来的userName=" + data.userName)
</script>